<template>
  <vxe-modal esc-closable height="98%" showFooter v-model="formVisible" :loading="formLoading" @hide="formClose" >
    <template slot="title">
      <span>授权表单</span>
    </template>
    <template>
      <el-scrollbar class="scrollbar-handle">
        <el-tabs tab-position="top" v-model="tabName" :before-leave="tabChange">
          <!-- 模块功能树型目录 -->
          <el-tab-pane name="1">
            <span slot="label">
              <i class="el-icon-s-tools"></i> 功能授权
            </span>
            <el-scrollbar class="scrollbar-handle">
              <el-tree
                default-expand-all
                :expand-on-click-node="false"
                :check-on-click-node="true"
                :data="moduleTreeList"
                ref="moduleTree"
                show-checkbox
                node-key="id"
                :default-checked-keys="checkedModuleIds"
              ></el-tree>
            </el-scrollbar>
          </el-tab-pane>
          <!-- 模块按钮树型目录 -->
          <el-tab-pane name="2">
            <span slot="label">
              <i class="el-icon-d-arrow-right"></i> 按钮授权
            </span>
            <el-scrollbar class="scrollbar-handle">
              <el-tree
                default-expand-all
                :expand-on-click-node="false"
                :check-on-click-node="true"
                :data="buttonTreeList"
                ref="buttonTree"
                show-checkbox
                node-key="id"
              >
                <span slot-scope="{ node, data }">
                  <span>
                    <i :class="data.icon"></i>
                    {{ node.label }}
                  </span>
                </span>
              </el-tree>
            </el-scrollbar>
          </el-tab-pane>
        </el-tabs>
      </el-scrollbar>
    </template>
    <template slot="footer">
      <el-button type="primary" @click="()=>{tabName='1'}" :disabled="prevDisabled">上一步</el-button>
      <el-button
        type="primary"
        @click="()=>{tabName==='2'?formSubmit():tabName='2'}"
      >{{tabName == "2" ? '保 存' : '下一步' }}</el-button>
    </template>
  </vxe-modal>
</template>

<script>
import { Authorize } from "@/api";
export default {
  name: "Form",
  props: {
    //授权分类-1角色2用户3岗位
    objectType: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      /* 实体数据 */
      //授权功能树型数据
      moduleTreeList: [],
      //授权功能选择数据
      checkedModuleIds: [],
      //授权按钮树型数据
      buttonTreeList: [],

      //表单可见
      formVisible: false,
      formLoading: false,
      //显示的选项卡
      tabName: "1",
      //上一步按钮使能
      prevDisabled: true,

      //对象主键
      objectId: ""
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {},
    //切换标签之前的钩子
    tabChange(activeName, oldActiveName) {
      if (activeName == "1") {
        //第一步了，禁用上一步按钮
        this.prevDisabled = true;
        return true;
      } else if (activeName == "2") {
        this.formLoading = true
        //最后一步了，加载授权按钮树型数据
        Authorize.GetButtonTreeList({
          objectId: this.objectId,
          moduleIds: this.util.getTreeCheckedIds(this.$refs["moduleTree"])
        })
          .then(res => {
            this.buttonTreeList = this.util.removeChildren(res.TreeList);
            this.$refs["buttonTree"].setCheckedKeys(
              res.CheckedAuthorities,
              true
            );
            //启动上一步按钮
            this.prevDisabled = this.formLoading = false;
          })
          .catch(err => {
            //还原tabName
            this.tabName = oldActiveName;
            this.formLoading = false;
          });
      } else {
        return false;
      }
    },
    //表单开启
    formOpen(objectId) {
      this.formVisible = this.formLoading = true; //打开表单
      this.tabName = "1"; //选项卡重置
      this.prevDisabled = true; //禁用上一步按钮
      //获取并初始化该对象所拥有的所有授权数据
      this.objectId = objectId;
      Authorize.GetModuleTreeList(this.objectId).then(res => {
        this.moduleTreeList = this.util.removeChildren(res.TreeList);
        this.checkedModuleIds = this.util.removeHalfCheck(
          res.CheckedAuthorities,
          this.moduleTreeList
        );
        this.formLoading = false; 
      });
    },
    //表单提交
    formSubmit() {
      //选择树型控件的数据获取（获取全选的叶子节点，isLeaf为true ）
      let moduleButtonNodes = this.$refs["buttonTree"].getCheckedNodes(
        true,
        false
      );
      let moduleButtonIds = [];
      moduleButtonNodes.forEach(item => {
        if (item.isLeaf === true) moduleButtonIds.push(item.id);
      });

      Authorize.Save({
        objectType: this.objectType,
        objectId: this.objectId,
        moduleIds: this.util.getTreeCheckedIds(this.$refs["moduleTree"]),
        moduleButtonIds: moduleButtonIds
      }).then(res => {
        this.formVisible = false; //关闭弹窗
      });
    },
    //表单关闭
    formClose() {
      //数据归位
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
};
</script>

<style lang="less" scoped>
.el-tab-pane {
  height: 70vh;
}
</style>